/* 
Document   : style
Created on : 19/01/2013, 21:07:06
Author     : Gabriel Almeida

*/

/*VARIÁVEIS*/


@font-face {
    font-family: adinekir;
    font-style: normal;
    font-weight: normal;
    src: url('../font/adinekir.eot');
}

/*MIXINS*/

@mixin container{
    width: 1000px;
    background: $trs;
    margin: 0 auto;
    text-decoration: none;
}

$azul: #005da4;
$trs: trsnsparent;
$font-pdr: 500 1.2em Arial; 

@mixin header{
    width: 100%;
    height: 150px;
    background: aqua;
    
    
    #logo {
        width: 300px;
        height: 100%;
        position: relative;
        background: url('../img/logo.png');
        display: inline-block;
    }
}


@mixin content{
    width: 100%;
    height:900px;
    background: $trs;
    position: relative;
    top: 406px;
    z-index: 0;
    
}

@mixin sub-content($width:900px, $height:350px, $marg-left:50px){
    width: $width;
    height: $height;
    background: #c1c1c1; 
    margin-top:70px;
    border-radius:5px;
    margin-left: $marg-left;
}

@mixin image-ponta($left:570px){
    width: 50px;
    height:50px; 
    position: absolute; 
    top:70px;
    left:$left ;
    
    
}

@mixin img-portf(){
    width: 210px;
    height: 255px; 
    background: white; 
    border-radius:8px;
    position: relative;
    top: 50px;
    left: 50px; 
    display: inline-block;
    margin-left: 30px;
    border:3px solid transparent;
    
    img{
        padding: 3px 3px 3px 3px;
    }
    
}


* {
    padding: 0;
    margin: 0;
}

.left {float: left;}
.right {float: right;}

body {
    background: #D6D4D4;
}


#conteiner {
    @include container;
    
    
    #header {
        @include header;
        
        .barra-banner{
            width: 690px; 
            height: 30px; 
            background: $trs; 
            display: inline-block; 
            position: relative; 
            top: -130px;
            
            p{
                font: 500 0.9em Arial; 
                color: $azul;
            }
            
            
        }
        
        .login{
            width:650px; 
            height:30px;
            display: inline-block; 
            position: relative; 
            top: -60px;
            left: 370px; 
            
            input.text{
                width: 200px; 
                height: 30px;
                font:$font-pdr;
            }
            
            label{
                font: $font-pdr; 
                color: $azul; 
            }
            
            input.log-in{
                position: relative; 
                top: 0px;
                left: 5px;
                width: 65px;
                height: 25px;
                background: url('../img/Log-In.png');
            }
            
            
            
        }
        
        
        #busca {
            width: 250px;
            height: 50px;
            background: transparent;
            display: inline-block;
            position: relative;
            left: 400px;
            top: -20px;
            border-radius: 20px;
            
            
            img.ajusta-botao-busca {
                position: relative;
                top: 8px;
            }
            
            .search {
                width: 200px;
                height: 30px;
                border-radius: 20px;
            }
            
        }
        
    }
    
    #banner {
        width: 100%;
        height: 400px;
        background: url('../img/banner.png') repeat-x ;
        position: absolute;
        left: 0;
        top: 150px;
        box-shadow: 2px 2px 2px black;
        z-index: 1;
        
    }
    
    #content {
        @include content;
        z-index: 2;
        
        
        .container-menu{
            width:100%;
            background: transparent; 
            height:40px; 
            position: relative; 
            top: -46px; 
            
            
            
            ul{
                padding-left: 200px; 
                li{
                    float: left;
                    padding: 20px 20px 20px 20px;
                    color: white;
                    
                    &:hover{
                        color: red;
                        cursor: pointer;
                        
                    }
                }
            }
        }
        
        .portifolio{
            @include sub-content;
            
            img.img-ponta{
                
                @include image-ponta(550px);
                
            }
            
            .img-portf{
                
                @include img-portf;  
                
                &:hover{
                    border:3px solid red;
                }
            }
            
            
        } 
        
        .home{
            @include sub-content(90%, 500px, 50px);
            
            img{
                @include image-ponta(190px);
                
            }
            
        }
        
        .contato{
            @include sub-content(90%, 500px, 50px);
            .block-left{
                width:400px; 
                height:450px;
                background: transparent;
                display: inline-block;
                position: relative;
                top: 25px; 
                left:20px;
                
                .form{
                    p.titulo{
                        font:700 2.5em Arial;
                        margin:10px 110px;
                        color: $azul;
                    }
                    
                    p.sub-titulo{
                        font:500 1.5em Arial;
                        margin:20px 60px;
                        color: $azul;
                    }
                    
                    p.conteudo{
                        font:500 1.2em Arial;
                        margin:10px 60px;
                        color: red;
                    }
                }
                
                
                
                
                
                
            }
            .block-right{
                width:425px; 
                height:450px; 
                background: transparent;
                display: inline-block;
                position: relative;
                top: 25px; 
                left:25px;
                border-left:3px solid #000000;
                
                .form{
                    margin:50px 50px;
                    
                    p{
                        font:700 1.000em Arial;
                        color: $azul;
                        margin-top:6px;
                    }
                    
                    input.text{
                        font:500 1.000em Verdana;
                        color: #000000;
                        width:300px; 
                    }
                    
                    input.sub{
                        background: #BEBEBE;
                        color: #005da4;
                        width: 100px;
                        height: 20px;
                        margin-top:6px;
                        
                    }
                    
                    textarea{
                        resize: none;
                        font:500 1.000em Verdana;
                        color: #000000;
                        width: 320px; 
                        height: 200px;
                    }
                }
                
            }
            
            
            img{
                
                @include image-ponta(680px);
                
            }  
            
        }
        
        .restrito{
            @include sub-content(90%, 500px, 50px);
            
            .restr-logoff{
                left: 250px;
                //margin: 180px 260px;
                position: relative;
                top: 150px;
                width: 400px;
                
                p{
                    font:700 3em Arial;
                    color: $azul;
                }
                p.sub-titulo{
                    font:500 1.2em Arial;
                    color: $azul;
                }
                a{
                    text-decoration: none;
                    color: red;
                }
                
            }
            
            
            
            img{
                @include image-ponta(440px);
                
            }
            
        }
        
        .quem-somos{
            @include sub-content(90%, 700px, 50px);
            
            
            
            img.image{
                width: 350px; 
                height: 400px; 
                background: #000000;
                margin:50px 50px;
                border-radius:4px;
            }
            
            p.titulo{
                font:700 1.6em Arial;
                color: $azul;
            }
            
            
            img.img-ponta{
                @include image-ponta(300px);
                
            }
            
        }
        
        
    }
    
    
}

#footer {
    width: 100%;
    height: 20px;
    background: #ffffff;
    margin-top: 350px;
    
}

 
